import React from 'react';
import { Form, Input, Button, Checkbox ,message} from 'antd';
import {reqLogin} from '../../api/index'
import './login.css'
import {connect} from 'react-redux'


import firstBcps from '../../assets/firstBcps.png'
class Login extends React.Component{
    constructor(props){
        super(props)
        this.state={
        }
    this.onFinish = this.onFinish.bind(this)
    this.onFinishFailed = this.onFinishFailed.bind(this)
    }
    componentDidMount(){
        console.log(this.state)
    }
    onFinish(values){
        console.log( values);
        reqLogin(values).then(res=>{
            console.log(res)
            if(res.code === 0){
                localStorage.setItem('token',res.data.token)
                message.success('登录成功！')
                setTimeout(()=>{
                    this.props.history.push('/home')
                },1000)
            }else{
                message.error('密码错误！请重新登录')
            }
        })
    };
    onFinishFailed(errorInfo){
        console.log('Failed:', errorInfo);
    };
    render(){
        const layout = {
            labelCol: {
              span: 8,
            },
            wrapperCol: {
              span: 16,
            },
          };
          const tailLayout = {
            wrapperCol: {
              offset: 8,
              span: 16,
            },
          };
        return (
            <React.Fragment>
                <img className="imgStyle" src={firstBcps}></img>
                <div className="header">西油危化品后台管理登录</div> 
                <div className="Login-content">
                    <Form  className="formItem"
                    {...layout}
                    name="basic"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    >
                    <Form.Item
                        label="账号"
                        name="userName"
                        rules={[
                        {
                            required: true,
                            message: '请输入账号!',
                        },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                        {
                            required: true,
                            message: '请输入密码!',
                        },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button className="button-style" type="primary" htmlType="submit">
                        登录
                        </Button>
                    </Form.Item>
                    </Form>
                </div>
            </React.Fragment>
        )
    }
}
const mapStateToProps = (state)=>{
    console.log(state)
    return {
        useUserMessage:state.useUserMessage
    }
}
export default connect(mapStateToProps)(Login)